<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-application">
          <div class="page">
            <div class="search-box">
              <div class="header-content">
                <div class="header-content-left">
                  <a-space :size="16">
                    <a-input
                        v-model:value="where.searchText"
                        placeholder="姓名、病案号（回车搜索 ）"
                        @pressEnter="reload"
                        class="search-input"
                    >

                      <template #prefix>
                        <icon-font iconClass="icon-opt-search"></icon-font>
                      </template>
                    </a-input>
                    <drop-down
                        :list="diseaseList"
                        dropName="病种"
                        ref="diseaseRef"
                        keyValue="dictCode"
                        keyName="dictName"
                        @dropClick="diseaseChange"
                    />
                    <a-button class="border-radius" @click="clear">重置</a-button>
                  </a-space>
                </div>
                <div class="header-content-right">
                  <a-space :size="16">
                    <a-button type="primary" class="border-radius" @click="openAdd()" v-permission="['ADD_PATIENT']"
                    ><plus-outlined />手动入组</a-button
                    >

                    <a-dropdown>
                      <template #overlay>
                        <a-menu @click="moreClick">
                          <a-menu-item key="1">
                            <icon-font iconClass="icon-opt-zidingyilie" color="#60666b"></icon-font>
                            <span>自定义列</span>
                          </a-menu-item>
                          <!--                          <div v-permission="['DELETE_POSITION']">
                                                      <a-menu-item key="2">
                                                        <icon-font iconClass="icon-opt-shanchu" color="#60666b"></icon-font>
                                                        <span>批量删除</span>
                                                      </a-menu-item>
                                                    </div>-->
                        </a-menu>
                      </template>
                      <a-button class="border-radius">
                        更多
                        <small-dash-outlined />
                      </a-button>
                    </a-dropdown>
                  </a-space>
                </div>
              </div>
            </div>
            <div class="search-list">
              <div class="table-content">
                <div>
                  <a-row :gutter="24">
                    <a-col v-for="record in columns"  :span="4">
                      <a-card hoverable style="width: 200px">
                        <template #cover>
                          <img v-if="record.sex=='M'&&record.status!=4"
                               alt="example"
                               src="@/assets/male.png"
                          />
                          <img v-if="record.sex=='F'&&record.status!=4"
                               alt="example"
                               src="@/assets/female.png"
                          />
                          <img v-if="record.sex=='M'&&record.status==4"
                               alt="example"
                               src="@/assets/maleRe.png"
                          />
                          <img v-if="record.sex=='F'&&record.status==4"
                               alt="example"
                               src="@/assets/femaleRe.png"
                          />
                        </template>

                        <a-card-meta :title="'&nbsp;姓&nbsp;&nbsp;名&nbsp;：'+record.name">
                        </a-card-meta>
                        <a-card-meta :title="'病案号：'+record.inNo">
                        </a-card-meta>
                        <a-card-meta :title="'单病种：'+record.diseaseName">
                        </a-card-meta>
                        <a-button type="primary" shape="round" style="margin-left: 40px;margin-top: 20px" @click="openAddEdit(record)">上报</a-button>
                      </a-card>
                    </a-col>
                  </a-row>
                </div>
<!--                <div style="text-align: right;margin-right: 60px"> <a-pagination
                    v-model:current="currentPage"
                    v-model:page-size="pageSizeRef"
                    :page-size-options="pageSizeOptions"
                    :total="total"
                    show-size-changer
                    @showSizeChange="onShowSizeChange"
                >
                  <template #buildOptionText="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-else>全部</span>
                  </template>
                </a-pagination></div>-->
                </div>
            </div>
            <div  class="bottom-box"> <a-pagination
               v-model:current="currentPage"
               v-model:page-size="pageSizeRef"
               :page-size-options="pageSizeOptions"
               :total="total"
               show-size-changer
               @showSizeChange="onShowSizeChange"
           >
             <template #buildOptionText="props">
               <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
               <span v-else>全部</span>
             </template>
           </a-pagination></div>
          </div>
        </div>
      </div>
    </div>


    <!-- 新增编辑弹框 -->
    <PatientAddEdit v-model:visible="showEdit" v-if="showEdit" :data="currentData" @done="reload" />
    <PatientAdd v-model:visible="showAdd" v-if="showAdd"  @done="reload" />
  </div>
</template>

<script setup name="Position">
import { PatientApi } from './api/PatientApi';
import {  watch,ref, createVNode, onMounted, onBeforeMount,reactive} from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import PatientAddEdit from './components/patient-add-edit.vue';
import PatientAdd from './components/patient_add.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { CustomApi } from '@/components/common/Custom/api/CustomApi';
import * as url from "url";
const columns = ref([
]);

// ref
const tableRef = ref(null);
const diseaseRef = ref(null);
const diseaseList = ref(null);
const pageSizeOptions = ref(['30', '60',  '100']);
const currentPage = ref(1);
const pageSizeRef = ref(30);
const total = ref(50);
// 搜索条件
const where = ref({
  searchText: ''
});
// 是否显示自定义列
const isShowCustom = ref(false);
// 当前行数据
const current = ref(null);
const currentData = ref(null);
// 是否显示新增编辑弹框
const showEdit = ref(false);
const showAdd = ref(false);
// 业务标识的编码
const fieldBusinessCode = ref('PATIENT_TABLE');

onBeforeMount(() => {
  getDictData();
});
onMounted(() => {
 //getColumnData();
  reload();
});
watch(
    () => currentPage.value,
    value =>  {
      reload()
    }
);
const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
  pageSizeRef.value = pageSize;
  reload()
};
const getDictData = () => {


  PatientApi.findDictList({ dictTypeId: '1813510904349069313' }).then(res => {
    diseaseList.value = res.data;
  });
};

// 获取表格配置
const getColumnData = () => {
  CustomApi.getUserConfig({ fieldBusinessCode: fieldBusinessCode.value }).then(res => {
    if (res.tableWidthJson) {
      columns.value = JSON.parse(res.tableWidthJson);
    }
  });
};

// 更多点击
const moreClick = ({ key }) => {
  if (key == '1') {
    isShowCustom.value = true;
  } else if (key == '2') {
    batchDelete();
  }
};
const diseaseChange = val => {
  where.value.diseaseCode = val;
  reload();
};
// 点击搜索
/*const reload = () => {
  tableRef.value.reload();
};*/
const reload = () => {
  PatientApi.findPage({ pageNo: currentPage.value, pageSize:pageSizeRef.value}).then(res => {
    columns.value = res.rows;
    total.value = res.totalRows
  });
};
// 清除搜索条件
const clear = () => {
  where.value.searchText = '';
  diseaseRef.value.changeDropname('病种');
  reload();
};

// 新增编辑点击
const openAddEdit = record => {

  for(let i = 0; i < diseaseList.value.length; i ++) {
    if (record.diseaseCode ==  diseaseList.value[i].dictCode) {
      record["diseaseName"]=diseaseList.value[i].dictName
    }
  }
  currentData.value = record;
  showEdit.value = true;
};
const openAdd = () => {
  showAdd.value = true;
};
// 删除单个
const remove = record => {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中的职位吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await PatientApi.delete({ positionId: record.positionId });
      message.success(res.message);
      reload();
    }
  });
};

// 批量删除
const batchDelete = () => {
  if (tableRef.value.selectedRowList && tableRef.value.selectedRowList.length == 0) {
    return message.warning('请选择需要删除的职位');
  }
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中的职位吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await PatientApi.batchDelete({ positionIdList: tableRef.value.selectedRowList });
      message.success(res.message);
      reload();
    }
  });
};


</script>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  .search-list {
    overflow: auto;
    flex: 1;
  }
  .bottom-box {
    background-color: #fff;
    padding: 12px 16px;
    text-align: right;
    border-top: 0.5px solid #ededed;
  }

}
.header-content {
  display: flex;
}
.header-content-left {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  overflow: hidden;
}
.header-content-right {
  width: 30%;
  text-align: right;
}
</style>
